﻿@page "/docs/extensions/video"

<Seo Canonical="/docs/extensions/video" Title="Blazorise Video Component" Description="Learn to use and work with the Blazorise Video component, a component used to play a regular or streaming media." />

<DocsPageTitle Path="Extensions/Video">
    Blazorise Video Component
</DocsPageTitle>

<DocsPageLead>
    A <Code>Video</Code> component used to play a regular or streaming media.
</DocsPageLead>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="VideoNugetInstallExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Imports">
        In your main <Badge Color="Color.Light">_Imports.razor</Badge> add:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="ImportVideoExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
        To play the video you just need to define the <Code>Source</Code> of the video.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicVideoExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicVideoExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Streaming">
        We also support streaming videos. To stream the video you just define the <Code>Source</Code> as usual, along with the <Code>StreamingLibrary</Code>
        used to handle the video media type.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <StreamingVideoExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="StreamingVideoExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Widevine DRM instantiation">
        This example shows how to use <Code>Video</Code> to play streams with Widevine DRM protection.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DRMVideoExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DRMVideoExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Multiple files">
        <Paragraph>
            The <Strong>VideoSource</Strong> object contains a list of <Strong>VideoMedia</Strong> instances, each representing a different quality of the same video. Each <Strong>VideoMedia</Strong> is initialized with a unique URL that points to the video source, a media type, and a quality represented as resolution (in pixels).
        </Paragraph>
        <Paragraph>
            Here, three versions of the same video are provided: a 576p, a 720p, and a 1080p. These different versions give users the ability to choose the video quality according to their network conditions or preferences.
        </Paragraph>
        <Paragraph>
            The <Strong>DefaultQuality</Strong> property set on the <Strong>Video</Strong> component dictates which version of the video is loaded by default when the component is rendered. In this case, it is set to "720", meaning the 720p version of the video will be the default.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <VideoMultipleSourcesExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="VideoMultipleSourcesExample" />
</DocsPageSection>

<DocsPageSubtitle>
    API
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Attributes
</Heading>

<DocsAttributes>
    <DocsAttributesItem Name="Controls" Type="bool" Default="true">
        Gets or sets the controls visibility of the player.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ControlsList" Type="string[]" Default="null">
        Gets or sets the list of controls that are rendered by the player. Possible list of values are contained in <Code>VideoControlsType</Code>.
    </DocsAttributesItem>
    <DocsAttributesItem Name="AutomaticallyHideControls" Type="bool" Default="false">
        Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly.
    </DocsAttributesItem>
    <DocsAttributesItem Name="AutoPlay" Type="bool" Default="false">
        Gets or sets the autoplay state of the player.
    </DocsAttributesItem>
    <DocsAttributesItem Name="AutoPause" Type="bool" Default="true">
        Only allow one player playing at once.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Muted" Type="bool" Default="false">
        Whether to start playback muted.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Source" Type="string" Default="null">
        Gets or sets the current source for the player.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Poster" Type="string" Default="null">
        Gets or sets the current poster image for the player.
    </DocsAttributesItem>
    <DocsAttributesItem Name="StreamingLibrary" Type="StreamingLibrary" Default="Html5">
        If defined the video will run in streaming mode.
    </DocsAttributesItem>
    <DocsAttributesItem Name="SeekTime" Type="int" Default="10">
        The time, in seconds, to seek when a user hits fast forward or rewind.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Volume" Type="double" Default="1">
        A number, between 0 and 1, representing the initial volume of the player.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ClickToPlay" Type="bool" Default="true">
        Click (or tap) of the video container will toggle play/pause.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DisableContextMenu" Type="bool" Default="true">
        Disable right click menu on video to help as very primitive obfuscation to prevent downloads of content.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ResetOnEnd" Type="bool" Default="false">
        Reset the playback to the start once playback is complete.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Ratio" Type="string" Default="null">
        Force an aspect ratio for all videos. The format is 'w:h' - e.g. '16:9' or '4:3'. If this is not specified then the default for HTML5 and Vimeo is to use the native resolution of the video. As dimensions are not available from YouTube via SDK, 16:9 is forced as a sensible default.
    </DocsAttributesItem>
    <DocsAttributesItem Name="InvertTime" Type="bool" Default="true">
        Display the current time as a countdown rather than an incremental counter.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ProtectionType" Type="VideoProtectionType" Default="None">
        Defines the encoding type used for the DRM protection.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ProtectionData" Type="object" Default="null">
        Defines the manual structure of the protection data. If defined, it will override the usage of <Code>ProtectionServerUrl</Code> and <Code>ProtectionHttpRequestHeaders</Code>.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ProtectionServerUrl" Type="string" Default="null">
        Defines the server url of the DRM protection.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ProtectionHttpRequestHeaders" Type="string" Default="null">
        Defines the protection token for the http header that is sent to the server. The request headers are optional; if left out, the server will not receive them.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DefaultQuality" Type="int?" Default="null">
        Gets or sets the default quality for the player. Defaults to <Code>576</Code> if unspecified.
    </DocsAttributesItem>
    <DocsAttributesItem Name="AvailableQualities" Type="string" Default="null">
        Defines the list of available quality options. Defaults to <Code>[4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]</Code> if unspecified.
    </DocsAttributesItem>
    <DocsAttributesItem Name="SettingsList" Type="VideoSettingsType[]" Default="Captions, Quality, Speed, Loop">
        If the default controls are used, you can specify which settings to show in the menu.
    </DocsAttributesItem>
</DocsAttributes>